<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>成绩导出PDF</title>
</head>
<div class="page">
    <div class="page__title"></div>
    <table class="table">
        <caption class="table__title">${exam.name}（考试排名）</caption>
        <thead class="table__head">
            <tr>
                <th>排名</th>
                <th>姓名</th>
                <th>机构</th>
                <th>分数</th>
                <th>考试结果</th>
                <th>答题用时</th>
                <th>阅卷用时</th>
            </tr>
        </thead>
        <tbody class="table__body">
        	<#list rankList as rank>
            <tr class="${(rank?index == 0)?then('row1', (rank?index == 1)?then('row2', (rank?index == 2)?then('row3', '')))}">
                <td>${rank.myExamNo}</td>
                <td>${rank.userName}</td>
                <td>${rank.orgName}</td>
                <td class="${(rank.myExamAnswerState == 1)?then('score-pass', 'score-fail')}">${rank.myExamTotalScore}</td>
                <td>${rank.myExamAnswerStateName}</td>
                <td>${rank.answerTime}分钟</td>
                <td>${rank.markTime}分钟</td>
            </tr>
            </#list>
        </tbody>
    </table>
</div>

<body>
</body>
<style>
    * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        padding: 0;
        background-color: #FFF;
        font-family: '黑体', 'Heiti SC', 'Droidsansfallback';
        font-size: 14px;
        color: #303133;
    }

    .page {
        width: 210mm;
        min-height: 297mm;
        margin: 0 auto;
        padding-top: 20px;
    }

    .page__title {}

    .table {
        width: 100%;
        border-collapse: collapse;
    }

    .table .table__title {
        height: 30px;
        margin-top: 10px;
        font-size: 18px;
    }

    .table .table__head tr {
        height: 48px;
        background-color: #D4EEFE;
        color: #333333;
    }

    .table .row1 {
        height: 38px;
        color: #999999;
        background-color: #FFFBED;
    }

    .table .table__body tr {
        height: 38px;
        text-align: center;
        color: #999999;
    }

    .table .row1 {
        background-color: #FFFBED;
    }

    .table .row2 {
        background-color: #E7F8F9;
    }

    .table .row3 {
        background-color: #FEF0EA;
    }

    tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    tr:nth-child(odd) {
        background-color: #ffffff;
    }
    
    .score-pass {
    	color: #67c23a;
    }
    .score-fail {
    	color: #f56c6c;
    }
</style>

</html>